<script setup lang="ts">
import { ref } from 'vue'
import KnowledgeCard from './KnowledgeCard.vue'
import type { KnowledgeType } from '@/types/consult'
import { getKnowledgePage } from '@/services/consult'
import type { KnowledgeList } from '@/types/consult'
const list = ref<KnowledgeList>([])
const loading = ref(false)
const finished = ref(false)

const props = defineProps<{
  type: KnowledgeType
}>()
const queryParam = ref({ type: props.type, current: 1, pageSize: 5 })
const onLoad = async () => {
  // 1. 发送请求
  const res = await getKnowledgePage(queryParam.value)
  list.value.push(...res.data.rows)
  // 2. 立马关闭loading
  loading.value = false
  // 3. 如果没有到最后一页 滚动触底继续请求下一页数据
  if (res.data.pageTotal > queryParam.value.current) {
    queryParam.value.current++
  } else {
    // 4. 数据请求结束了
    finished.value = true
  }
}
</script>

<template>
  <div class="knowledge-list">
    <!-- loading 是控制加载状态的 默认是false, load处理函数执行的时候, 会自动加loading设置为true, 一次请求结束后,需要手动将loading设置为false 
         finished 控制加载结束的布尔值 默认是false 数据请求结束了 需要将finished设置为true  finished-text也就会展示了
         onLoad 处理函数 获取数据, 页面加载默认就会执行一次(或多次)onLoad处理函数, 滚动页面滚动条即将触底 再次执行onLoad
    -->
    <van-list
      v-model:loading="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <knowledge-card
        v-for="item in list"
        :key="item.id"
        :item="item"
      ></knowledge-card>
    </van-list>
  </div>
</template>

<style lang="scss" scoped>
.knowledge-list {
  padding: 0 15px;
}
</style>
